<template>
  <div>
    我是user
    <!--:to="'/user/'+index"是一个动态路由-->
    <!--<router-link key="index" :to="'/user/'+item.tip+'/'+item.id" v-for="item,index in userList">{{item.userName}}</router-link>-->
    <!--对上面方式的改写-->
    <router-link :key = " index " :to="{path:'/user/'+item.tip+'/'+item.id,query:{info:'follow'}}" v-for = " item, index in userList ">{{item.userName}}</router-link>
     <div v-if="userInfo.userName">
      <p>姓名：{{userInfo.userName}}</p>
      <p>性别：{{userInfo.sex}}</p>
      <p>爱好：{{userInfo.hobby}}</p>
     </div> 
    <hr>
    <div v-if="userInfo.userName">
      <!--在当前路由下添加query参数，如当前路由为http://localhost:8080/user/vip/2，则点击关注或分享后变为：http://localhost:8080/user/vip/2?info=follow-->
      <!--设置query的第一种方式：-->
      <router-link exact to="?info=follow">他的关注</router-link>
      <!--设置query的第二种方式,path代表当前路径-->
      <router-link exact="" :to="{path:'',query:{info:'share',a:1}}">他的分享</router-link>
      <p>{{$route.query}}</p>
    </div>
  </div>
</template>
<script>
  let user = [
    {
      id: 1,
      tip: 'vip',
      userName: 'leo1',
      sex: '男',
      hobby: '读书'
    },
    {
      id: 2,
      tip: 'vip',
      userName: 'leo2',
      sex: '男',
      hobby: '写代码'
    },
    {
      id: 3,
      tip: 'common',
      userName: 'leo3',
      sex: '男',
      hobby: '听音乐'
    }
  ]
  export default{
    data () {
      return {
        userList: user,
        userInfo: {}
      }
    },
    watch: {
      $route  () {
       // 路径发生变化，$route会重新赋值，监控这个属性发生变化会执行这个函数
        this.getData()
      }
    },
    created () {
      // 渲染这个组件会调用一次这个生命周期函数
      // 复用这个组件，这个函数不会再次被调用
      console.log(this.$route) // this.$route代表的是访问当前组件所对应的路由信息对象
      this.getData()
    },
    methods: {
      // 获取对应id下的用户信息
      getData () {
        let id = this.$route.params.userId
        if (id) {
          this.userInfo = this.userList.filter((item) => {
            if (item.id === parseInt(id)) {
              return item
            }
          })[0]
        } else {
          this.userInfo = {}
        }
      }
    }
  }
</script>
<style>
</style>
